<script setup>
import BusinessPanel from "@/views/Home/component/BusinessPanel.vue"
import AgentClient from "@/views/Home/component/AgentClient.vue"
import ProjectCase from "@/views/Home/component/ProjectCase.vue"
import WarehouseIntroduction from "@/views/Home/component/WarehouseIntroduction.vue"
import { onMounted } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
const menuClick = (item) => {
  router.push({
    path: `/ConsultingPrices`,
  })
}
onMounted(() => {
})
</script>
<template>
  <div class="global-home">
    <div class="swiper-container wow bounceInLeft animated animation-delay-1"
      style="visibility: visible; animation-name: bounceInLeft;">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="desc" text="2xl">
            <div class="text">Cross-border logistics and warehousing agency</div>
            <div class="btn">
              Learn more
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center-container wow bounceInLeft animated animation-delay-1"
      style="visibility: visible; animation-name: bounceInRight;">
      <div class="quotation-inquiry wow bounceInLeft animated">
        <div class="left">
          <p class="text">Quotation inquiry</p>
          <img src="@/assets/images/arrow.png" alt="">
        </div>
        <div class="right">
          <div class="air pub" @click="menuClick('air')">
            <div class="normal">
              <img src="@/assets/images/air.png" alt="">
              <p class="text">Air transport</p>
            </div>
            <div class="hover">
              <img class="left-img" src="@/assets/images/air-t.png" alt="">
              <p class="text">Air transport</p>
              <img class="right-arrow" src="@/assets/images/right-arrow.png" alt="">
            </div>
          </div>
          <div class="sea pub" @click="menuClick('sea')">
            <div class="normal">
              <img src="@/assets/images/sea.png" alt="">
              <p class="text">Sea transport</p>
            </div>
            <div class="hover">
              <img class="left-img" src="@/assets/images/sea-t.png" alt="">
              <p class="text">Sea transport</p>
              <img class="right-arrow" src="@/assets/images/right-arrow.png" alt="">
            </div>
          </div>
          <div class="air pub" @click="menuClick('warehousing')">
            <div class="normal">
              <img src="@/assets/images/wh.png" alt="">
              <p class="text">warehousing</p>
            </div>
            <div class="hover">
              <img class="left-img" src="@/assets/images/wh-t.png" alt="">
              <p class="text">warehousing</p>
              <img class="right-arrow" src="@/assets/images/right-arrow.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="business-introduce wow bounceInLeft animated animation-delay-1"
        style="visibility: visible; animation-name: bounceInLeft;">
        <div class="modules-title">Business Introduction</div>
        <div class="content wow bounceInLeft animated"
          style="margin: 30px 0px 0px 0px;visibility: visible; animation-name: bounceInLeft;">
          <BusinessPanel>
            <template #left>
              <div class="left">
                <img src="@/assets/images/container-ship.png" alt="">
              </div>
            </template>
            <template #right>
              <div class="right">
                <div class="title">Sea transportation</div>
                <div class="line">
                  <span class="line-5B108E line-pub"></span>
                  <span class="line-FF77AE line-pub"></span>
                </div>
                <div class="introduce">
                  As a first tier booking agent for COSCO in Germany, we provide a complete range of German Chinese
                  shipping services, including pick-up, warehouse consolidation, short haul truck/container trailer
                  door-to-door loading, lead sealing, port delivery, VGM declaration, customs clearance, and bill of
                  lading, ensuring efficient, safe, and smooth customs clearance of your goods.
                </div>
                <div class="btn">Contact Us</div>
              </div>
            </template>
          </BusinessPanel>
        </div>
        <div class="content wow bounceInRight animated"
          style="margin: 50px 0px 0px 0px;visibility: visible; animation-name: bounceInRight">
          <BusinessPanel>
            <template #left>
              <div class="right">
                <div class="title">Air transport</div>
                <div class="line">
                  <span class="line-5B108E line-pub"></span>
                  <span class="line-FF77AE line-pub"></span>
                </div>
                <div class="introduce">
                  As a first tier booking agent for CA and CK, we provide one-stop services throughout the entire
                  process, including pick-up, security check, booking, customs declaration, and cut-off. Ensure smooth
                  and seamless operation at every step, helping your goods to clear customs efficiently and safely
                </div>
                <div class="btn">Contact Us</div>
              </div>
            </template>
            <template #right>
              <div class="left">
                <img src="@/assets/images/freight-port.png" alt="">
              </div>
            </template>
          </BusinessPanel>
        </div>
        <div class="content wow bounceInLeft animated"
          style="margin: 50px 0px 0px 0px;visibility: visible; animation-name: bounceInLeft;">
          <BusinessPanel>
            <template #left>
              <div class="left">
                <img src="@/assets/images/forklift-truck.png" alt="">
              </div>
            </template>
            <template #right>
              <div class="right">
                <div class="title">Warehouse & Storage Solutions</div>
                <div class="line">
                  <span class="line-5B108E line-pub"></span>
                  <span class="line-FF77AE line-pub"></span>
                </div>
                <div class="introduce">
                  Our bonded warehouse offers secure, compliant storage for imported goods, with seamless transshipment
                  via T1 and T2 customs methods. We streamline the entire process with efficient clearance and transfer
                  workflows to enhance the speed and flow of your goods.
                  With a focus on safety and efficiency, we also specialize in handling hazardous materials, ensuring
                  secure and smooth operations. Beyond standard services, we offer value-added solutions like parts
                  replacement, labeling, and repackaging, helping you optimize handling and meet specific needs.
                </div>
                <div class="btn">Contact Us</div>
              </div>
            </template>
          </BusinessPanel>
        </div>
      </div>
    </div>
    <div class="client-container wow bounceInRight animated animation-delay-1"
      style="visibility: visible; animation-name: bounceInRight;">
      <AgentClient></AgentClient>
    </div>
    <div class="project-container wow bounceInLeft animated animation-delay-1"
      style="visibility: visible; animation-name: bounceInLeft;">
      <ProjectCase></ProjectCase>
    </div>
    <div class="warehouse-container wow bounceInRight animated animation-delay-1"
      style="visibility: visible; animation-name: bounceInRight;">
      <WarehouseIntroduction></WarehouseIntroduction>
    </div>
  </div>
</template>
<style scoped lang="scss">
.animation-delay-1 {
  animation-delay: 100ms;
}

.animation-delay-2 {
  animation-delay: 300ms;
}

.animation-delay-3 {
  animation-delay: 500ms;
}

.animation-delay-4 {
  animation-delay: 700ms;
}

.animation-delay-5 {
  animation-delay: 900ms;
}

.global-home {
  background: #fff;

  .swiper-container {
    width: 100%;
    height: 800px;
    background: url("@/assets/images/home-bkg.png") no-repeat;
    background-size: 100% 100%;

    :deep(.el-carousel) {
      height: 800px;

      .el-carousel__item {
        height: 800px;

        .desc {
          padding: 241px 0px 0px 360px;
          box-sizing: border-box;

          .text {
            width: 849px;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 58px;
            color: #fff;
            line-height: 68px;
            text-align: left;
          }

          .btn {
            color: #fff;
            width: 145px;
            height: 46px;
            background: #FF7700;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 57px 0px 0px 0px;
            cursor: pointer;
          }
        }
      }

      .el-carousel__indicators--horizontal {
        bottom: 125px;
        left: 360px;
        transform: translateX(0);
      }
    }
  }

  .center-container {
    max-width: 1200px;
    margin: 0 auto;

    .quotation-inquiry {
      background: #fff;
      display: flex;
      align-items: center;
      width: 100%;
      height: 151px;
      box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.06);
      margin: 0 auto;
      border-top: 4px solid #5B108E;
      transform: translate(0%, -50%);
      padding: 0px 0px 0px 36px;

      .left {
        font-size: 24px;
        color: #5B108E;
        line-height: 34px;
        width: 150px;
        height: 96px;

        .text {
          font-weight: bold;
          line-height: 28px;
        }
      }

      .right {
        height: 96px;
        margin: 0px 0px 0px 103px;
        display: flex;

        .pub {
          width: 249px;
          height: 96px;
          background: #fff;
          border-radius: 4px;
          border: 1px solid #5B108E;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0px 43px 0px 0px;
          cursor: pointer;

          .hover {
            display: none;
          }

          .normal {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

            img {
              width: 32px;
              height: 32px;
            }

            .text {
              font-size: 18px;
              color: #5B108E;
            }
          }

          &:hover {
            background: linear-gradient(267deg, #8252A2 0%, #5B108E 100%);
            box-shadow: 0px 3 6px 1px rgba(0, 0, 0, 0.16);
            border-radius: 4px;
            border: 0px;

            .normal {
              display: none;
            }

            .hover {
              position: relative;
              display: flex;
              align-items: center;
              width: 100%;
              height: 100%;

              .left-img {
                width: 63px;
                height: 63px;
                position: absolute;
                left: 0px;
                top: 50%;
                transform: translate(0px, -50%);
              }

              .text {
                font-weight: bold;
                padding: 0px 0px 0px 34px;
                font-size: 18px;
                color: #fff;
              }

              .right-arrow {
                width: 26px;
                height: 26px;
                position: absolute;
                right: 22px;
              }
            }
          }

        }
      }
    }

    .business-introduce {
      margin: -40px 0px 0px 0px;

      .modules-title {
        font-weight: bold;
        font-size: 32px;
        color: #333;
        line-height: 45px;
        text-align: center;
      }

      .content {
        display: flex;

        .left {
          width: 626px;
          height: 407px;

          img {}
        }

        .right {
          padding: 33px 35px;
          width: 574px;
          height: 407px;
          background: rgba(222, 222, 222, 0.12);
          box-sizing: border-box;
          position: relative;

          .title {
            font-weight: bold;
            font-size: 30px;
            color: #333;
            line-height: 42px;
          }

          .line {
            display: flex;
            margin: 23px 0px 0px 0px;

            .line-pub {
              width: 66px;
              height: 6px;
            }

            .line-5B108E {
              background: #5B108E;
            }

            .line-FF77AE {
              background: #FF77AE;
            }
          }

          .introduce {
            font-size: 16px;
            color: #666666;
            line-height: 22px;
            text-align: left;
            margin: 28px 0px 0px 0px;
            word-break: break-all;
          }

          .btn {
            color: #fff;
            width: 145px;
            height: 46px;
            background: #FF7700;
            border-radius: 2px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 35px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .client-container {
    background: url("@/assets/images/agent-bkg.png") no-repeat;
    height: 365px;
    background-size: 100% 100%;
    margin: 146px 0px 0px 0px;
  }

  .project-container {
    background: url("@/assets/images/project-bkg.png") no-repeat;
    height: 759px;
    background-size: 100% 100%;
  }

  .warehouse-container {
    background: url("@/assets/images/wh-bkg.png") no-repeat;
    height: 974px;
    background-size: 100% 100%;

  }
}
</style>
